<!--
 * @Author: panda-hbd 1511539537@qq.com
 * @Date: 2022-11-15 14:49:47
 * @LastEditors: panda-hbd 1511539537@qq.com
 * @LastEditTime: 2022-11-17 11:06:12
 * @FilePath: \text-online-system2\src\components\SubjectItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="subject">
    <div class="type">
      <h4>{{data.typeName}}</h4>
      <i>（{{data.score}}）分</i>
    </div>
    <div class="subject-text">
      <p>{{data.stem}}</p>
    </div>
    <div class="answer">
      <ul v-if="data.option" >
        <li  v-for="(item,index) in data.option.split(' ')" @click="doingChoose(data.id,item,data.type)"><i>{{String.fromCharCode(65+index)}}</i>{{item}}</li>
      </ul>
      <ul v-else-if="data.type==3" >
          <li><el-icon @click="doingChoose(data.id,'对',data.type)"><Select /></el-icon><el-icon @click="doingChoose(data.id,'错')"><Close /></el-icon></li>
        </ul>


    </div>
    <div class="info" v-if="data.studentAnswsers" >
      <span>本题得分：<i>{{data.studentAnswsers.score}}</i>分</span>
      <h4>正确答案：<i>{{data.result}}</i></h4>
      <span @click="showAnalysis" class="analysisBtn">查看解析 <el-icon><arrow-down /></el-icon></span>
      <div class="analysis" ref="analysis" >
        <p>{{data.analysis}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SubjectItem",

  props:['data'],
  data() {
    return {};
  },

  mounted() {},

  methods: {
    showAnalysis(e){
        e.currentTarget.nextElementSibling.style.display = e.currentTarget.nextElementSibling.style.display=='block'?'none':'block'
    },
    //  选择答案，点击选项
    doingChoose(questionId,result,type){
      this.$emit("saveRecord",questionId,result,type)
  }
  },

  computed:{

  }
};
</script>

<style scoped>
.subject {
  width: 100%;
}

.type {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  border-left: 2px solid #000;
  padding-left: 0.5rem;
}
.type i {
  font-size: 0.75rem;
  color: rgb(106, 104, 104);
}
.subject-text {
  margin: 1rem 0;
}
.answer ul li {
  display: flex;
  align-items: center;
  margin: 0.5rem 0;
  color: rgba(0, 0, 0, 0.769);
  font-size: 0.875rem;
}
.answer ul li i {
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #23aaf2;
  border: 1px solid #23aaf2;
  margin-right: 1rem;
  font-size: 1.2rem;
  text-align: center;
  line-height: 2rem;
}
.info {
  width: 100%;
  padding: 0.5rem;
  margin: 0.8rem 0;
  line-height: 1.8rem;
  background-color: rgb(243, 240, 240);
}

.analysis{
    background-color: #fff;
    padding: 0.3rem ;
    display: none;
}
.analysis p{
    font-size: 0.875rem;
    /* margin: 0.3rem 0; */
}
.analysisBtn{
    color: #23aaf2;
}

.answer li i:hover{
  cursor: pointer;
  color: orange;
  border: 1px solid orange

}

.selectAnswer{
  color: orange;
  border: 1px solid orange
}
</style>
